<template>
  <Row>
    <Col span="24">
      <Card>
        <p slot="title" style="height:40px">
          <Button type="primary" @click="addClass" icon="md-add">新增</Button>
        </p>
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="classID"
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          v-loading="loading"
          element-loading-text="数据加载中,请稍后"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column prop="classID" label="分类id"></el-table-column>
          <el-table-column align="center" prop="className" label="分类昵称"></el-table-column>
          <el-table-column align="center" prop="statusText" label="状态"></el-table-column>
          <el-table-column align="center" prop="addTime" label="添加时间"></el-table-column>
          <el-table-column align="center" prop="typeText" label="类型"></el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status==1?true:false"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchClick(scope.$index,scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="addClass(scope.$index,scope.row)">编辑</el-button>
              <el-button @click="delClass(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="提示"
          :visible.sync="modalSetting.show"
          width="50%"
          @open="open"
          :modal-append-to-body="false"
          :before-close="handleClose"
        >
          <p slot="title" style="color:#2d8cf0;">
            <Icon type="md-information-circle"></Icon>
            <span>{{form.classID ? '编辑' : '新增'}}分类</span>
          </p>
          <el-form ref="form" :model="form" label-width="150px">
            <el-form-item label="上级分类" v-if="parentIDVisible" prop="type">
              <el-cascader
                clearable
                :options="tableMasterData"
                :props="{ checkStrictly: false }"
                expand-trigger="hover"
                placeholder="不填写，则为一级分类"
                @change="classChange"
                :value="[form.parentID]"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="分类昵称">
              <el-input v-model="form.className"></el-input>
            </el-form-item>
            <el-form-item label="活动背景图片">
              <x-upload
                :XAction="uploadUrl"
                :XHeader="uploadHeader"
                :compression="true"
                :XMaxImg="1"
                v-model="form.Img"
              ></x-upload>
            </el-form-item>
            <el-form-item label="是否使用本地图片">
              <el-radio-group v-model="form.islocalImg">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="form.sort"></el-input>
            </el-form-item>
            <!-- <el-form-item label="类型">
              <el-radio-group v-model="form.type">
                <el-radio :label="0">产品</el-radio>
                <el-radio :label="1">分类</el-radio>
              </el-radio-group>
            </el-form-item>-->
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio :label="0">停用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="modalSetting.show = false">取 消</el-button>
            <el-button type="primary" @click="submit('form')">确 定</el-button>
          </span>
        </el-dialog>
      </Card>
    </Col>
  </Row>
</template>

<script>
import axios from "axios";
import config from "../../../../build/config";
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      tableMasterData: [],
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      form: {},
      parentIDVisible: false,
      dialogVisible: false,
      uploadUrl: "",
      uploadHeader: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleClose() {},
    open() {
      this.uploadUrl = config.baseUrl + "Index/upload";
      this.uploadHeader = { ApiAuth: sessionStorage.getItem("apiAuth") };
      this.getParentList();
    },
    classChange(arr) {
      this.form.parentID = arr[arr.length - 1];
    },
    delClass(index, row) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .post("MallClass/delete", {
              classID: row.classID
            })
            .then(response => {
              if (response.data.code == 1) {
                this.$message({
                  type: "success",
                  message: response.data.msg
                });
              } else {
                this.$message({
                  message: response.data.msg
                });
              }
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: response.data.msg
          });
        });
    },
    getParentList() {
      let vm = this;
      vm.tableMasterData = [];
      axios
        .post("MallClass/index", {
          page: 1,
          size: 10000
        })
        .then(function(response) {
          let res = response.data;
          if (res.code === 1) {
            for (let i = 0; i < res.data.list.length; i++) {
              let arr = { value: "", label: "" };
              arr.value = res.data.list[i].classID;
              arr.label = res.data.list[i].className;
              // if (res.data.list[i].children) {
              //   for (let j in res.data.list[i].children) {
              //     arr.children.push({
              //       value: res.data.list[i].children[j].classID,
              //       label: res.data.list[i].children[j].className
              //     });
              //   }
              // }
              vm.tableMasterData.push(arr);
            }
          } else {
            if (res.code === -14) {
              vm.$store.commit("logout", vm);
              vm.$router.push({
                name: "login"
              });
            } else {
              vm.$message({
                message: res.msg,
                type: "error"
              });
            }
          }
        });
    },
    switchClick(index, row) {
      axios
        .post("ScClass/updateStatus", {
          classID: row.classID,
          status: row.status == 1 ? 0 : 1
        })
        .then(response => {
          if (response.data.code === 1) {
            this.$Message.success(response.data.msg);
            this.getList();
          } else {
            this.$message({
              message: response.data.msg,
              type: "error",
              offset: 100
            });
          }
        });
    },
    addClass(index, row) {
      if (!this.tableMasterData) {
        this.parentIDVisible = false;
      } else {
        this.parentIDVisible = true;
      }
      if (row) {
        this.form = row;
        this.modalSetting.show = true;
        if (!row.parentID) {
          this.parentIDVisible = false;
        }
      } else {
        this.form = {};
        this.modalSetting.show = true;
      }
    },
    submit(formName) {
      let self = this;
      self.modalSetting.loading = true;
      if (!this.form.parentID) {
        this.form.parentID = 0;
      }
      this.form.type = 0;
      self.$refs[formName].validate(valid => {
        if (valid) {
          axios
            .post("MallClass/changeClass", self.form)
            .then(function(response) {
              if (response.data.code === 1) {
                self.$message({
                  message: response.data.msg,
                  type: "success",
                  offset: 200
                });
                self.modalSetting.show = false;
                self.getList();
              } else {
                self.$message({
                  message: response.data.msg,
                  type: "error"
                });
              }
            });
        } else {
          return false;
        }
      });
    },
    getList() {
      this.loading = true;
      axios
        .post("MallClass/index", {
          page: 1,
          size: 10000
        })
        .then(response => {
          let res = response.data;
          if (res.code === 1) {
            this.tableData = res.data.list;
            this.tableShow.listCount = res.data.count;
          } else {
            if (res.code === -14) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(res.msg);
            }
          }
          this.loading = false;
        });
    }
  }
};
</script>

<style>
</style>